<template>
	<view class="home-content" style="">
		<view class="main" style="">
			 
			 <view class="car-title" style="">
				 <view class="" @click="tourl('/pages/index/list')" style="display: flex;">
					 <text class="car-text" style="" >雅迪电动车</text>
				 	<!-- <image class="logo" src="../../static/logo.png" mode=""></image> -->
					<i class="iconfont" style="">&#xe627;</i>
				 </view>
				 <view class="">
					 
				     <i class="iconfont" style="font-size: 50rpx;" @click="tourl('/pages/home/notice')" >&#xe604;</i>
				 </view>
			 </view>
			 <view class="car-content" style="">
			   <view class="content-text" style="">
				   <view class="Electricity" style="">
					   <i class="iconfont" style="margin: auto;" >&#xe600;</i>
			   			<text>59%</text>
			   	    </view>
					<view class="Endurance" style="">
						续航 66KM
					</view>
			   </view>
			   <view class="Bluetoothstatus" style="">
			   	<i class="iconfont" style="font-size: 20rpx;" >&#xec4a;</i>
			   	<text>蓝牙未连接</text>
			   </view>
			   <image src="http://120.234.27.130:9010/uploads/images/ddc.png" mode="aspectFit"
			   style=""></image>
			 </view>
			 <view class="btn-content" style="">
			 	<view class="btn-top" style="border-bottom: #dfdfdf solid  1rpx;">
			 		<view class="btn-item" style="" @click="tourl('/pages/home/dashboard')">
			 		  <i class="iconfont" style="font-size: 50rpx;" >&#xe77c;</i>
			 		  <view style="">仪表盘</view>
			 		</view>
					<view class="openbtn" style="">
					  <movable-area style="">
					    <movable-view
					      :x="Rx"
					      :y="Ry"
					      direction="horizontal"
					      @change="rChange"
					      style="z-index: 99;"
					    >
					      <!-- 小一点的图标 -->
					      <i class="iconfont" v-if="openBtn==1"  style="font-size: 60rpx;z-index: 99;" >&#xe61b;</i>
						  <view class="loading-spinner"  v-if="openBtn==2" ></view>
						  <uni-icons type="info-filled" v-if="openBtn==3" size="33"></uni-icons>

						  
					    </movable-view>
					    <view style="position: absolute; color: #333; z-index: 1;padding-left: 40rpx;">
					      {{opentext}}
						  
					    </view>
					  </movable-area>
					  <view class="" style="text-align: center;margin-top: 20rpx;">
					  	滑动开机
					  </view>
					</view>
					<view  class="btn-item" style="" @click="tourl('/pages/home/configuration')">
					  <i class="iconfont" style="font-size: 50rpx;" >&#xe611;</i>
					  <view style="">设置</view>
					</view>

			 	</view>
				<view class="btn-top" style="">
					<view  class="btn-item" style="">
					  <i class="iconfont" style="font-size: 50rpx;" >&#xe65d;</i>
					  <view style="">感应解锁</view>
					</view>
					<view  class="btn-item" style="" @click="tourl('/pages/home/carUser')">
					  <i class="iconfont" style="font-size: 50rpx;" >&#xe607;</i>
					  <view style="">用车人</view>
					</view>
					<view  class="btn-item" style="">
					  <i class="iconfont" style="font-size: 50rpx;" >&#xe68b;</i>
					  <view style="">闪灯鸣笛</view>
					</view>

				</view>
			 </view>
			 <view class="map-label" style=" background-color: aquamarine;" @click="tourl('/pages/home/map')">
			     <!-- <map style="width: 100%; height: 75px;" :latitude="latitude" :longitude="longitude" :markers="covers">
			 					 
			     </map> -->
			     <!-- <view class="width: 100%; height: 75px;">
			     	
			     </view> -->
			     <view style="position: absolute; top: 0; left: 0; width: 100%; height: 75px;z-index: 999;">
			         <view class="rectangle" style="">
			             <view class="">
							  深圳市宝安区航城智慧科技园
			             </view>
						 <view class="">
						 	  一天前
						 </view>
			         </view>
			     </view>
			 </view>


			 <view class="btn-bottom" style="">
				 
			 	<view class="btn-bottom-item" @click="toInquire(item)"  v-for="(item, index) in btnlist" 
			 	      :style="{ 
			 	          margin: index % 2 == 0 ? '0 1% 10rpx 0' : '0 0 10rpx 1%', 
			 	          boxShadow: '0 4rpx 10rpx rgba(0, 0, 0, 0.1)' 
			 	      }"  
			 	      :key="index" 
			 	      style="">
			 	    <view class="i-icons" :style="{ backgroundColor: item.bg}" 
			 	          style="">
			 	        <i class="iconfont ph" style="" v-html="item.icons"></i>
			 	    </view>
			 	    <view class="item-content" style="">
			 	        <view class="i-title" style="">
			 	            {{item.title}}
			 	        </view>
			 	        <view class="i-text" style="">
			 	            {{item.text}}
			 	        </view>
			 	    </view>
			 	</view>

			 </view>
			 <view class="to-pos"  style="" @click="tourl('/pages/home/SearchPos')">
			 	<view class="pos-icon" style="" >
			 		<i class="iconfont ph" style="" >&#xe60b;</i>
			 	</view>
			 	<view class="" style="margin-left: 30rpx;">
			 		<view class="" style="font-size: 30rpx;">
			 			发起导航
			 		</view>
			 		<view class="" style="font-size: 20rpx;color: #c2c2c2;margin-top: 5rpx;">
			 			地图路线指引，出行便捷高效
						
			 		</view>
			 	</view>
			 </view>
			 <!-- <view class="" style="display: flex; flex-direction: column; align-items: center; ">
			     <image class="" style="height: 50rpx; width: 50rpx; border-radius: 50%;" src="../../static/logo.png" mode="aspectFit"></image>
			     <text>寻车鸣笛</text>
			 </view> -->



		</view>
		

		
		<view class="navbar" style="">
			<navbarVue />
		</view>
	</view>
</template>

<script>
	import navbarVue from '../../components/navbar.vue'
	export default {
		 components: {
		    navbarVue
		  },
		data() {
			return {
				latitude: 39.909,  // 设置地图中心点纬度
				longitude: 116.39742,  // 设置地图中心点经度
				covers: [{
				    latitude: 39.909,
				    longitude: 116.39742,
				    iconPath: '../../static/logo.png'  // 标记图标路径
				}],
				btnlist:[
					{
						bg:'#4e92ff',
						icons:'&#xe629;',
						title:'电池信息',
						text:'实时查询',
						URL:'/pages/home/battery'
					},
					{
						bg:'#ce89ff',
						icons:'&#xe7c4;',
						title:'骑行统计',
						text:'数据统计',
						URL:'/pages/home/statistics'
					},
					{
						bg:'#ff3811',
						icons:'&#xe64d;',
						title:'历史轨迹',
						text:'骑行回放',
						URL:'/pages/home/trajectory'
					},
					{
						bg:'#76f39e',
						icons:'&#xe796;',
						title:'电子围栏',
						text:'安全守护',
						URL:'/pages/home/fencing'
					},
					{
						bg:'#7eabff',
						icons:'&#xe8ab;',
						title:'智驾配置',
						text:'用车习惯',
						URL:'/pages/home/configuration'
					},
					{
						bg:'#ffcf8a',
						icons:'&#xe990;',
						title:'报警配置',
						text:'安全省心',
						URL:'/pages/home/alarm'
					}
					
				],
				Rx: 0, // 初始位置
				Ry: 0, // Y轴位置可以保持为0
				openBtn:1,
				susses:0,
				opentext:'右滑解锁',
				leftStatus:0,//左滑是否成功
				rightStatus:0,//右边滑是否成功
				leftTimer: null,   // 用来保存左滑定时器ID
				rightTimer: null,  // 用来保存右滑定时器ID
			}
		},
		onLoad() {
			

		},
		methods: {
			// handleTouchEnd(e) {
			//    console.log("Touch End Event:", e);  // 确保触发了事件
			//     this.Rx = 0;
			//     console.log("Updated Rx:", this.Rx);  // 确认 Rx 被设置为 0
			  
			// },

			tourl(URL){
				uni.navigateTo({
					url:URL
				})
			},
			toInquire(item){
				uni.navigateTo({
					url:item.URL
				})
			},
			rChange(e) {
			  // 判断右滑
			  if (e.detail.x >= 70 &&e.detail.x <= 80&& this.susses !== 2) {
			    this.Rx = 43;
			    this.openBtn = 2;
			    this.susses = 2; // 设置右滑状态
			
			    // 防止重复触发，确保右滑逻辑只执行一次
			    if (this.rightTimer) {
			      clearTimeout(this.rightTimer);
			      this.rightTimer = null;
			    }
			
			    this.righttime();
			  }
			
			  // 判断左滑
			  if (e.detail.x == 0 && this.susses !== 1) {  // 改为判断负值滑动
			    this.Rx = 43;
			    this.openBtn = 2;
			    this.susses = 1; // 设置左滑状态
			
			    // 防止重复触发，确保左滑逻辑只执行一次
			    if (this.leftTimer) {
			      clearTimeout(this.leftTimer);
			      this.leftTimer = null;
			    }
			
			    this.lefttime();
			  }
			},


			  
			lefttime() {
			  let that = this;
			
			  // 清理已有的定时器
			  if (that.leftTimer) {
			    clearTimeout(that.leftTimer);
			    that.leftTimer = null; // 确保清理后重新初始化
			  }
			
			  that.leftTimer = setTimeout(() => {
			    that.openBtn = 3; // 开启按钮的状态
			    console.log('定时器触发', that.leftStatus);
			    
			    // 清理当前的定时器
			    clearTimeout(that.leftTimer);
			    that.leftTimer = null;
			
			    // 判断滑动方向，执行不同的操作
			    if (that.leftStatus === 0) {
			      // 左滑时的定时器
			      that.leftTimer = setTimeout(() => {
			        // 执行左滑后的操作
			        that.Rx = 85;
			        that.openBtn = 1;
					that.susses = 2;
					that.leftStatus=1
			        that.opentext = '左滑关闭';
			
			        // 清理定时器
			        clearTimeout(that.leftTimer);
			        that.leftTimer = null;
			      }, 500);
			    } else {
			      // 右滑时的定时器
			      that.leftTimer = setTimeout(() => {
			        // 执行右滑后的操作
			        that.Rx = 0;
			        that.openBtn = 1;
					that.susses = 1;
					that.leftStatus=0
			        that.opentext = '右滑启动';
			
			        // 清理定时器
			        clearTimeout(that.leftTimer);
			        that.leftTimer = null;
			      }, 500);
			    }
			
			  }, 3000); // 每次动作间隔3000ms
			},


			
			  righttime() {
			    let that = this;
			
			    // 清理已有的定时器
			    if (this.rightTimer) {
			      clearTimeout(this.rightTimer);
			    }
			
			    this.rightTimer = setTimeout(() => {
			      that.openBtn = 3; // 开启按钮的状态
			      console.log('1111111');
				  if(this.rightStatus==0){
					  // 右滑时的定时器
					  this.rightTimer = setTimeout(() => {
					    that.Rx = 0;
					    that.openBtn = 1;
						that.susses = 1;
					  	that.opentext = '右滑启动';
					    this.rightStatus=1
					    // 清理右滑定时器
					    clearTimeout(this.rightTimer);
					    this.rightTimer = null;
					  }, 500);
				  }else{
					  // 右滑时的定时器
					  this.rightTimer = setTimeout(() => {
					    that.Rx = 84;
					    that.openBtn = 1;
						that.susses = 2;
						that.rightStatus=0
					  	that.opentext = '左滑关闭';
					    
					    // 清理右滑定时器
					    clearTimeout(this.rightTimer);
					    this.rightTimer = null;
					  }, 500);
				  }
			      
			    }, 3000);
			  },
			


	    }
	}
</script>

<style lang="scss" scoped>
	/* 旋转的圆形加载图标 */
	.loading-spinner {
		background-color: #000000;
	  width: 40rpx;              /* 设置加载图标的大小 */
	  height: 40rpx;
	  border: 4px solid #000000; /* 设置灰色边框 */
	  border-top: 4px solid #ffffff; /* 设置顶部为蓝色边框，形成旋转效果 */
	  border-radius: 50%;        /* 使其成为圆形 */
	  animation: spin 1s linear infinite; /* 设置旋转动画 */
	  
	}
	
	/* 旋转动画 */
	@keyframes spin {
	  0% {
	    transform: rotate(0deg); /* 初始角度 */
	  }
	  100% {
	    transform: rotate(360deg); /* 旋转360度 */
	  }
	}
	.rectangle{
	// margin-top:50px;
	padding: 30rpx;
	font-size: 25rpx;display: flex;flex-direction: column;
	justify-content: space-between;box-sizing: border-box;
	width: 80%;
	height: 75px;
	background:linear-gradient(-115deg,transparent 52px, #ffc54f 0)top right;
	color: #fff;
	background-size:100% 100%;
	background-repeat:no-repeat;
	}
	.iconfont{
		margin: auto;
	}
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
	
	.center {
    display: flex;
    justify-content: center;  /* 水平居中 */
    /* align-items: center;      /* 垂直居中 */ 
    width: 100%;
    text-align: center;
	.battery-info{
		margin: 20rpx 30rpx;
		.battery-name{
			color: #8f8f94;
		}
		.battery-value{
			font: 100rpx bold;
		}
	}
}

	



	.home-content {
		height: 94vh;
		overflow: scroll;
		box-sizing: border-box;
		width: 100%;
		 flex: 1; 
		 padding: 0;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background-color: #ececf1;
		.main{
			width: 100%;padding: 30rpx;box-sizing: border-box;
			.car-title{
				display: flex;justify-content: space-between;
				view{
					.car-text{
					font-size: 50rpx;font-weight: bold;
					}
				}
				
			}
			
			.car-content{
				display: flex; justify-content: center; align-items: center;position: relative;width: 100%;
				.Bluetoothstatus{
					position: absolute;top: 10rpx;right: 10rpx;padding: 5rpx 15rpx;
					border: 1rpx solid #dfdfdf;background-color: #fff;
					border-radius: 50rpx;display: flex;font-size: 20rpx;
				}
				.content-text{
					position: absolute;top: 10rpx;left: 10rpx;
					.Electricity{
						display: flex;justify-content: space-between;
					}
					.Endurance{
						font-size: 30rpx;font-weight: bold;
					}
				}
			}
			.btn-content{
				width: 100%;background-color: #fff; 
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				padding: 20rpx;box-sizing: border-box;margin-top: 30rpx;
				.btn-top{
					display: flex;justify-content: space-between;padding: 40rpx;
					.openbtn{
						width: 40%; height: 60rpx; border: 1px solid #000; border-radius: 50rpx; padding: 5rpx; 
						movable-area{
							width: 80%; height: 50rpx; padding: 5rpx; display: flex; align-items: center; justify-content: center; 
						}
					}
					.btn-item{
						display: flex; flex-direction: column; align-items: center; 
						view{
							text-align: center; margin-top: 20rpx;
						}
					}
				}
			}
			.map-label{
				height: 75px;width: 100%; position: relative;margin-top: 20rpx;
			}
			.btn-bottom{
				display: flex;flex-wrap:wrap;width: 100%;padding: 20rpx 0 10rpx 0;
				.btn-bottom-item{
					.i-icons{
						.iconfont{
							font-size: 50rpx;color: gray;line-height: 80rpx;color: #fff;
						}
						margin-right: 20rpx;width: 80rpx;height: 80rpx;border-radius: 50%;text-align: center;
					}
					.item-content{
						.i-title{
							font-size: 30rpx;
						}
						.i-text{
							font-size: 23rpx;color: #c5c5c5;margin-top: 5rpx;
						}
					}
					border: 1rpx solid #dfdfdf;width: 49%;display: flex;
					padding: 30rpx;box-sizing: border-box;border-radius: 20rpx;background-color: #fff;
				}
			}
			.to-pos{
				border: 1rpx solid #dfdfdf;width: 100%;display: flex;padding: 30rpx;box-sizing: border-box;
				border-radius: 20rpx;background-color: #fff;margin-bottom: 5%;
				.pos-icon{
					margin-right: 20rpx;width: 80rpx;height: 80rpx;
					border-radius: 50%;text-align: center;background-color: #ffd12b;
					.iconfont{
						font-size: 50rpx;color: gray;line-height: 80rpx;color: #fff;
					}
				}
			}
		}
		
	}
.navbar{
			position: fixed;bottom: 0%;background-color: #fff;width: 100%;padding: 15rpx 0;
		}
.logo {
		height: 28rpx;
		width: 28rpx;
		margin-right: 20rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
</style>
